<template>
  <div class="container">
    <div class="search_condition_bar">
      <el-col :span="24" class="warp-breadcrum">
        <!--搜索栏-->
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" @submit.native.prevent style="margin-left:-20px;">
            <el-form-item label="区域名称" label-width="100px">
              <el-input clearable v-model="name" placeholder="区域名称" @change="queryAreasInner"></el-input>
            </el-form-item>
            <el-form-item label="区域级别" label-width="100px">
              <template>
                <el-select
                  clearable
                  v-model="level"
                  placeholder="区域级别"
                  value-key="level"
                  style="width:208px;"
                  @change="queryAreasInner"
                >
                  <el-option label="不限" :value="null"></el-option>
                  <el-option
                    v-for="levelObj in this.GlobalConstants.AREA_LEVELS"
                    :key="levelObj.level"
                    :label="levelObj.name"
                    :value="levelObj.level"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="邮政编码" label-width="100px">
              <el-input clearable v-model="zipCode" placeholder="邮政编码" @change="queryAreasInner"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="区号" label-width="100px">
              <el-input clearable v-model="cityCode" placeholder="区号" @change="queryAreasInner"></el-input>
            </el-form-item>
            <el-form-item label="行政区码" label-width="100px">
              <el-input clearable v-model="code" placeholder="行政区码" @change="queryAreasInner"></el-input>
            </el-form-item>
            <el-form-item label="父级行政区码" label-width="100px">
              <el-input clearable v-model="parentCode" placeholder="父级行政区码" @change="queryAreasInner"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryAreas">查询</el-button>
              <el-button type="primary" @click="queryAreasInner">刷新</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </div>

    <hr style="width: 1160x;" />
    <el-col :span="24" class="toolbar block">
      <!--数据分页
            layout：分页显示的样式
            :page-size：每页显示的条数
            :total：总数
            具体功能查看地址：http://element.eleme.io/#/zh-CN/component/pagination
      -->
      <el-pagination
        layout="total,prev,pager,next,jumper"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-size="pageSize"
        :total="totalElements"
        background
        hide-on-single-page
        style="text-align: center;"
      ></el-pagination>
    </el-col>
    <div class="search_result_list">
      <el-table :data="areaList" stripe border v-loading="listLoading">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="69px"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column prop="name" label="区域名称" width="80px" header-align="center"></el-table-column>
        <el-table-column prop="shortName" label="区域简称" width="80px" header-align="center"></el-table-column>
        <el-table-column prop="pinyin" label="简称拼音" width="110px" header-align="center"></el-table-column>
        <el-table-column prop="mergeName" label="区域组合名称" width="170px" header-align="center"></el-table-column>
        <el-table-column label="区域级别" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level == 0" type="primary">省级</el-tag>
            <el-tag v-if="scope.row.level == 1" type="primary">市级</el-tag>
            <el-tag v-if="scope.row.level == 2" type="primary">县级</el-tag>
            <el-tag v-if="scope.row.level == 3" type="primary">乡镇级</el-tag>
            <el-tag v-if="scope.row.level == 4" type="primary">村级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="邮政编码" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{preAeroFilledZipCode(scope.row.zipCode)}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="cityCode"
          label="区号"
          width="60px"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="行政区码"
          width="115px"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="parentCode"
          label="父级行政区码"
          width="115px"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column label="经纬度" header-align="center" align="left">
          <template slot-scope="scope">
            <span>(</span>
            <span v-if="scope.row.longitude > 0">E{{scope.row.longitude}}</span>
            <span v-if="scope.row.longitude < 0">W{{-scope.row.longitude}}</span>
            <span>,&nbsp;</span>
            <span v-if="scope.row.latitude > 0">N{{scope.row.latitude}}</span>
            <span v-if="scope.row.latitude < 0">S{{-scope.row.latitude}}</span>
            <span>)</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "areaQuery",
  data() {
    return {
      name: "",
      level: "",
      zipCode: "",
      cityCode: "",
      code: "",
      parentCode: "",

      // 查询到的区域列表
      areaList: [],

      // 总记录数
      totalElements: 0,
      // 请求的是第几页的数据
      pageNo: 1,
      // 每页几条数据
      pageSize: 10,

      listLoading: false
    };
  },
  mounted() {
    this.queryAreas();
  },
  methods: {
    queryAreas: function() {
      this.pageNo = 1;
      this.queryAreasInner();
    },

    queryAreasInner: function() {
      this.listLoading = true;
      this.$api.area
        .queryAreasPage({
          name: this.name,
          level: this.level,
          code: this.code,
          parentCode: this.parentCode,
          zipCode: this.zipCode,
          cityCode: this.cityCode,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        })
        .then(res => {
          this.listLoading = false;
          if (!res) {
            return;
          }

          this.totalElements = res.body.totalElements;
          this.areaList = res.body.list;
        });
    },

    //点击分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryAreasInner();
    },

    index: function(idx) {
      return idx + 1 + (this.pageNo - 1) * this.pageSize;
    },

    preAeroFilledZipCode: function(zipCode) {
      if (zipCode == 0) {
        return zipCode;
      }

      let newZipCode = "" + zipCode;

      while (newZipCode.length < 6) {
        newZipCode = "0" + newZipCode;
      }

      return newZipCode;
    }
  }
};
</script>

<style scoped>
.search_condition_bar {
  padding-top: 10px;
}
.search_result_list {
  margin-top: -8px;
  margin-left: -14px;
}

hr {
  margin-left: -15px;
}
</style>